<template>
  <div>
  <mu-card class="advert-box" v-if="advert!==''">
    <img :src="advert" alt />
  </mu-card>
  <div class="problem-box scrllor">
    <mu-form :model="form" class="mu-demo-form" :label-position="labelPosition" label-width="100">
      <div class="title-box">
        <p>填写设备编号</p>
      </div>
      <mu-form-item prop="input" label aria-placeholder>
        <input type="text" v-model="form.device_no" class="my-input" placeholder="设备编号" maxlength="8"/>
      </mu-form-item>
         <div class="title-box">
        <p>填写端口编号</p>
      </div>
      <mu-form-item prop="input" label aria-placeholder>
        <input max="100" type="text" v-model="form.prot" class="my-input" placeholder="设备端口" maxlength="10"/>
      </mu-form-item>
      <div class="title-box">
        <p>选择故障原因</p>
      </div>
      <mu-row gutter>
        <mu-col
          span="4"
          v-for="(item,index) in problemList"
          :key="index"
          :class="{ checkprot:index==pindex}"
          @click="checkproblem(index,item.code)"
        >
          <div class="grid-cell">
            {{item.codeName}}
            <input
              type="radio"
              name="problem-id"
              :checked="index==pindex"
              :value="item.code"
            />
          </div>
        </mu-col>
      </mu-row>
      <textarea placeholder="填写故障原因" v-model="form.problem"></textarea>
      <mu-form-item prop="input" label aria-placeholder>
        <input
          type="text"
          v-model="form.phone"
          class="my-input"
          placeholder="联系人手机号"
          maxlength="11"
        />
      </mu-form-item>
      <mu-button class="btn problem-btn" @click="submit()">提交</mu-button>
    </mu-form>
  </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import "vant/lib/toast/style/index";
export default {
  data() {
    return {
      pindex: -1,
      advert: "",
      problemList: [],
      labelPosition: "top",
      form: {
        problem: "",//问题描述
        prot: "",//端口号
        phone: "",//手机号
        type: "",//问题类型
        device_no:'',//设备编号
      }
    };
  },
  methods: {
    checkproblem(index, id) {
      this.pindex = index;

      this.form.type = id;
    },

    submit() {
         if (this.form.device_no == "") {
        Toast("请填写故障设备端口");
        return;
      }
      if (this.form.prot == "") {
        Toast("请填写故障设备端口");
        return;
      }
      if (this.form.type == "") {
        Toast("请选择故障原因");
        return;
      }

      if (this.form.phone == "") {
        Toast("请填写联系手机号");
        return;
      }
      if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.form.phone)) {
        Toast("手机号有误请重新填写");
        return;
      };

      this.$api.saveFeedBack({
        search_mobile:this.form.phone,
        search_type:this.form.type,
        search_rmk:this.form.problem,
        search_device_no:this.form.device_no,
        search_device_port:this.form.prot
      }).then(res=>{
        console.log(res)
        if(res.data.code == 0){
           Toast("故障提交成功,谢谢您的反馈");
           this.$router.push("/mine");
        }else{
           Toast(res.data.msg);
        }
      })


    }
  },
  created() {
    this.$api.getCommon().then(res => {
      this.problemList = res.data.result;
      this.form.reason = res.data.result[0].code;
    });
      //广告
      this.$api.showAdvert(1004).then(res => {
          this.advert = res.data.result.imageUrl;
      });
  }
};
</script>

<style>
</style>
